<template>
  <div class="home-page">
    <div class="bg-white">
      <div style="margin-bottom: 20px">
        <SearchBox></SearchBox>
      </div>
      <div style="margin-bottom: 20px">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img class="swipe-img" src="@/assets/images/banner.png" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <FuncArea></FuncArea>
      <Notice></Notice>
    </div>
    <!-- 学霸榜 -->
    <div style="padding: 16px 16px 0">
      <BaseMoreHead
        @click="toMore('学霸榜')"
        :title="'学霸榜'"
        :rightTitle="'更多'"
      ></BaseMoreHead>
      <BaseSortScore @click="clickItem" :list="list"></BaseSortScore>
    </div>
    <!-- 直播 -->
    <div style="padding: 16px 16px 0">
      <BaseMoreHead
        @click="toMore('直播')"
        :title="'直播'"
        :rightTitle="'更多'"
      ></BaseMoreHead>
      <BaseCardL :objData="liveObj"></BaseCardL>
    </div>
    <!-- 必修推荐 -->
    <div style="padding: 16px 16px 0">
      <!-- <Compulsory></Compulsory> -->
      <BaseMoreHead
        @click="toMore('必修推荐-学习计划')"
        :title="'必修推荐'"
        :rightTitle="'更多'"
      ></BaseMoreHead>
      <BaseCardB :objData="bxData"></BaseCardB>
    </div>
    <!-- 超级培训计划 -->
    <div style="padding: 16px 16px 0">
      <!-- <Super></Super> -->
      <BaseMoreHead
        @click="toMore('超级培训计划')"
        :title="'超级培训计划'"
        :rightTitle="'更多'"
      ></BaseMoreHead>
      <BaseCardB :objData="bxData"></BaseCardB>
    </div>
    <!-- 新员工培训 -->
    <div style="padding: 16px">
      <BaseMoreHead
        @click="toMore('新员工培训')"
        :title="'新员工培训'"
        :rightTitle="'更多'"
      ></BaseMoreHead>
      <BaseCardZ :objData="zqData"></BaseCardZ>
    </div>
    <!-- 周期计划 -->
    <div style="padding: 16px">
      <BaseMoreHead
        @click="toMore('必修推荐')"
        :title="'必修推荐'"
        :rightTitle="'更多'"
      ></BaseMoreHead>
      <BaseCardC :objData="bxtjData"></BaseCardC>
    </div>
    <!-- 讲师榜 -->
    <div style="padding: 16px">
      <BaseMoreHead
        @click="toMore('讲师榜')"
        :title="'讲师榜'"
        :rightTitle="'更多'"
      ></BaseMoreHead>
      <BaseSortScore @click="clickItemJs" :list="list"></BaseSortScore>
    </div>
    <!-- 选修推荐 -->
    <div style="padding: 16px">
      <BaseMoreHead
        @click="toMore('选修推荐')"
        :title="'选修推荐'"
        :rightTitle="'更多'"
      ></BaseMoreHead>
      <BaseCardX :objData="xxData"></BaseCardX>
    </div>
  </div>
  <!-- <HomeFooter /> -->
</template>

<script setup>
import { ref } from "vue";
import FuncArea from "../components/FuncArea.vue";
import Notice from "../components/Notice.vue";
// import SortScore from "../components/SortScore.vue";
import SearchBox from "../components/Search.vue";
//import Live from "../components/Live.vue";
//import Compulsory from "../components/Compulsory.vue";
// import Super from "../components/Super.vue";
// import Cycle from "../components/Cycle.vue";
import BaseMoreHead from "@/components/base-more-head.vue";
import BaseSortScore from "@/components/base-sort-score.vue";
import BaseCardL from "@/components/baseCardL.vue";
import BaseCardB from "@/components/base-card-b.vue";
import BaseCardZ from "@/components/base-card-z.vue";
import BaseCardC from "@/components/base-card-c.vue";
import BaseCardX from "@/components/base-card-x.vue";
import { useRouter } from "vue-router";

const getImg = (name) => {
  return `/src/assets/images/${name}.png`;
};
const router = useRouter();
const list = [
  {
    rankImg: getImg("one"), //ref('@/assets/images/one.png'),
    imgUrl: getImg("tx"), //ref("@/assets/images/tx.png"),
    rank: "1",
    name: "王力宏",
    score: "120",
    scoreName: "学分",
  },
  {
    rankImg: getImg("two"), //ref('@/assets/images/one.png'),
    imgUrl: getImg("tx"), //ref("@/assets/images/tx.png"),
    rank: "2",
    name: "刘德华",
    score: "120",
    scoreName: "学分",
  },
  {
    rankImg: getImg("three"), //ref('@/assets/images/one.png'),
    imgUrl: getImg("tx"), //ref("@/assets/images/tx.png"),
    rank: "3",
    name: "谢霆锋",
    score: "120",
    scoreName: "学分",
  },
];
const liveObj = [
  {
    imgUrl: getImg("login"),
    bmPic: "56人报名",
    tag: "必修",
    title: "2023人事资源管理如何激励你的员工",
    time: " 2022-03-23 18:22",
    userImg: getImg("login"),
    userName: "陈飘零",
    btnName: "直播中",
  },
  {
    imgUrl: getImg("login"),
    bmPic: "16人报名",
    tag: "",
    title: "2023人事资源管理如何激励你的员工",
    time: " 2022-03-23 18:22",
    userImg: getImg("login"),
    userName: "陈飘零",
    btnName: "直播中",
  },
];
const bxData = [
  {
    imgUrl: getImg("login"),
    tag: "必修",
    title: "2023人事资源管理如何激励你的员工",
    money: "50",
    xf: "32",
    time: "2023年7月12月 12:22:22",
    name1: "金币",
    name2: "学分",
  },
  {
    imgUrl: getImg("login"),
    tag: "",
    title: "2023人事资源",
    money: "50",
    xf: "32",
    time: "2023年7月12月 12:22:22",
    name1: "金币",
    name2: "学分",
  },
  {
    imgUrl: getImg("login"),
    tag: "必修",
    title: "2023人事资源管理如何激励你的员工",
    money: "150",
    xf: "32",
    time: "2023年7月12月 12:22:22",
    name1: "金币",
    name2: "学分",
  },
];
const zqData = [
  {
    imgUrl: getImg("login"),
    tag: "必修",
    title: "2023人事资源管理如何激励你的员工",
    press: "已完成12%",
    btnName: "继续学习",
    money: "150",
    xf: "32",
    name1: "金币",
    name2: "学分",
  },
  {
    imgUrl: getImg("login"),
    tag: "",
    title: "2023人事资源管理如何激励你的员工",
    press: "已完成12%",
    btnName: "继续学习",
    money: "150",
    xf: "32",
    name1: "金币",
    name2: "学分",
  },
];
const bxtjData = [
  {
    imgUrl: getImg("login"),
    tag: "必修",
    title: "2023人事资源管理如何激励你的员工",
    desc: "描述描述描述描述描述",
    money: "150",
    xf: "32",
    name1: "金币",
    name2: "学分",
  },
  {
    imgUrl: getImg("login"),
    tag: "必修",
    title: "2023人事资源管理如何激励你的员工",
    desc: "描述描述描述描述描述",
    money: "150",
    xf: "32",
    name1: "金币",
    name2: "学分",
  },
  {
    imgUrl: getImg("login"),
    tag: "必修",
    title: "2023人事资源管理如何激励你的员工",
    desc: "描述描述描述描述描述",
    money: "150",
    xf: "32",
    name1: "金币",
    name2: "学分",
  },
];
const xxData = [
  {
    imgUrl: getImg("login"),
    tag: "必修",
    title: "2023人事资源管理如何激励你的员工",
    pic: "12",
    zpic: "33",
    money: "150",
    xf: "32",
    name1: "金币",
    name2: "学分",
  },
  {
    imgUrl: getImg("login"),
    tag: "",
    title: "2023人事资源管理如何激励你的员工",
    pic: "12",
    zpic: "33",
    money: "150",
    xf: "32",
    name1: "金币",
    name2: "学分",
  },
];
//更多
const toMore = (value) => {
  if (value == "学霸榜") {
    router.push({
      path: "/charts",
    });
  }
  if (value == "必修推荐-学习计划") {
    router.push({
      path: "/study-plan",
    });
  }
  if (value == "新员工培训") {
    router.push({
      path: "/new-employee",
    });
  }
  if (value == "讲师榜") {
    router.push({
      path: "/lecturer",
    });
  }
  if (value == "直播") {
    router.push({
      path: "/live-history",
    });
  }
};
//学霸榜
const clickItem = (value) => {
  router.push({
    path: "/student",
  });
};
//讲师榜
const clickItemJs = (value) => {
  router.push({
    path: "/lecturer-center",
  });
};
</script>

<style lang="scss" scoped>
.home-page {
  min-height: calc(100vh - 120px);
  background: #f5f9fc;
  .bg-white {
    background-color: #fff;
    padding: 16px;
  }
  .swipe-img {
    width: 100%;
    height: 160px;
  }
}
</style>
